<gm:page title="Sample - Maps Mashup" authenticate="false" onload="load()">
  
  <div class="gm-app-header">
    <h1>Artist Origin Mashup</h1>
  </div>
    
  <table width="100%">
    <tr>
      <td style="padding-right:10px; width:250px" valign="top">
        <gm:list id="cities" data="${tmp}/cities"
            pagesize="10" template="cityListTemplate">
          <gm:handleEvent event="select" src="originsMap"/>
        </gm:list>
      </td>
      <td valign="top">
        <gm:map id="originsMap" style="border:solid black 1px" control="large"
            maptypes="false" data="${cities}" latref="lat" lngref="long"
            infotemplate="infoTemplate">
          <gm:handleEvent event="select" src="cities"/>
        </gm:map>
      </td>
    </tr>    
  </table>
  
  <gm:list id="artists" style="display:none" 
  data="http://pipes.yahoo.com/pipes/pipe.run?_id=MnGxAVeg3RGdXTQ01L3fcQ&_render=rss&country=Australia%23New+Zealand%23United+States+of+America%23United+Kingdom%23Spain%23Germany%23France"/>

  <gm:template id="cityListTemplate">
    <table class="blue-theme" style="width:250px">
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
      </tr>
      <tfoot>
        <tr>
          <td align="center"><gm:pager compact="true"/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>

  <gm:template id="infoTemplate">
    <div repeat="true">
      <b><gm:text ref="atom:title"/></b><br/>
      Lat: <gm:text ref="lat"/><br/>
      Long: <gm:text ref="long"/><br/>
      Artists: <gm:text ref="artist"/>
    </div>
  </gm:template>
  
 
  
  
  <script>
    var geocoder = null
    
    function load() {
      setTimeout("genCitiesFeed()", 2000);
    }
    
    function genCitiesFeed() 
    {
      var artistsList = google.mashups.getObjectById('artists');
      var artistsFeed = artistsList.getData();
      var citiesList = google.mashups.getObjectById('cities');
      var citiesFeed = citiesList.getData();
    
      var nameGPath = new GPath("atom:title");
      var originGPath = new GPath("atom:summary");
      var latGPath = new GPath("geo:lat");
      var lngGPath = new GPath("geo:long");
      var cityLatGPath = new GPath("lat");
      var cityLngGPath = new GPath("long");
      var cityArtistGPath = new GPath("artist");
    
      var newCity = null;
      
      for (i=0; i < artistsFeed.size(); i++) {
        var artist = artistsFeed.entryAt(i);
    
        // Retrieve the artist's name and origin for this entry
        var artistName = nameGPath.getValue(artist);
        var origin = originGPath.getValue(artist);
        var originLat = latGPath.getValue(artist);
        var originLng = lngGPath.getValue(artist);
        
        //alert(origin + ": " + originLat + ", " + originLng);
        
        newCity = citiesFeed.createEntry();
        nameGPath.setValue(newCity, origin);
        cityArtistGPath.setValue(newCity, artistName);
        if (originLat && originLng) {
          cityLatGPath.setValue(newCity, originLat);
          cityLngGPath.setValue(newCity, originLng);
        }
        citiesFeed.addEntry(newCity);
        
        // Need to deal with multiple artists from the same city
        // But currently, this should fill the cities feed with data
      }
      //alert ("Cities feed has " + citiesFeed.size() + " entries");
    }
  </script>
  
</gm:page>
